<template>
  <div>
    <!-- 根据角色动态加载对应的组件 -->
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import AdminDashboard from './admin.vue'
import EmployeeDashboard from './index.vue'

export default {
  name: 'Dashboard',
  components: {
    AdminDashboard,
    EmployeeDashboard
  },
  data() {
    return {
      currentComponent: null
    }
  },
  created() {
    this.initDashboard()
  },
  methods: {
    initDashboard() {
      // 从store中获取用户角色信息
      const roles = this.$store.getters.roles
      console.log(roles);

      // 判断角色并设置对应的组件
      if (roles.includes('admin')|| roles.includes('testAdmin')) {
        this.currentComponent = 'AdminDashboard'
      } else {
        this.currentComponent = 'EmployeeDashboard'
      }
    }
  },
  // 监听路由变化，重新判断应该显示哪个面板
  watch: {
    '$route': {
      handler: 'initDashboard',
      immediate: true
    },
    // 监听用户角色变化
    '$store.getters.roles': {
      handler: 'initDashboard',
      immediate: true
    }
  }
}
</script>
